<template>
  <div class="shopinfo">
    <!-- 商品轮播区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- changes  true宽度为100%  在swiperelunbo中做出判断 -->
          <swiperlunbo :swiperpic="shopinfo" :changes="false"></swiperlunbo>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="mui-card">
      <div class="mui-card-header">
        <h4>{{spinfo.title}}</h4>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div>
            <p>
              市场价：
              <del>{{spinfo.market_price}}</del>
              销售价：
              <span class="xspic">{{spinfo.sell_price}}</span>
            </p>
            <p style="float:left;margin-top:10px">购买数量</p>
            <!-- 引入组件    接受子组件的input的值   传值库存情况-->
            <numbox
              style="float:left;margin:5px"
              @getnumboxvalue="getshopcarnumber"
              :maxnumber="spinfo.stock_quantity"
            ></numbox>
            <div style="clear:both"></div>
          </div>
          <div class="mui-btn mui-btn-primary">立即购买</div>
          <button type="button" class="mui-btn mui-btn-danger" @click="getshopcar()">加入购物车</button>
        </div>
      </div>
    </div>
    <!-- 商品参数 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{spinfo.goods_no}}</p>
          <p>库存情况：{{spinfo.stock_quantity}}</p>
          <p>上架时间：{{spinfo.add_time | dataFormat}}</p>
        </div>
      </div>
      <button
        type="button"
        class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
        @click="jieshao(id)"
      >图文介绍</button>
      <button
        type="button"
        class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined"
        @click="pinglun(id)"
      >商品评论</button>
    </div>
    <!-- 小球动画 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-if="flag" ref="ball"></div>
    </transition>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import swiperlunbo from "./swiperlunbo.vue"; //轮播组件
import numbox from "../chajian/numbox.vue"; //数字输入框组件
var dodo = true; //全局控制小球
export default {
  data() {
    return {
      id: this.$route.params.id, //获取路由id参数
      shopinfo: [], //图片
      spinfo: [], //商品详情
      flag: false, //小球
      shopcarnumber: 1 //购物车的计数
    };
  },
  created() {
    this.getshopinfo();
    this.getspinfo();
  },
  methods: {
    getshopinfo() {
      this.$http //图片接口
        .get("http://www.liulongbin.top:3005/api/getthumimages/" + this.id)
        .then(result => {
          var result = result.body;
          // console.log(result);
          if (result.status == 0) {
            result.message.forEach(element => {
              element.picUrl = element.src;
            });
            this.shopinfo = result.message;
          } else {
            Toast("加载失败");
          }
        });
    },
    //商品详情接口
    getspinfo() {
      this.$http
        .get("http://www.liulongbin.top:3005/api/goods/getinfo/" + this.id)
        .then(result => {
          var result = result.body;
          // console.log(result);
          if (result.status == 0) {
            this.spinfo = result.message[0];
          } else {
            Toast("加载失败");
          }
        });
    },
    //图文介绍
    jieshao(id) {
      this.$router.push({ name: "jieshao", params: { id } });
    },
    //商品评论
    pinglun(id) {
      this.$router.push({ name: "pinglun", params: { id } });
    },
    //购物车
    getshopcar() {
      if (dodo) {
        this.flag = !this.flag;
        // console.log(this.flag);
        //把数据用vuex进行状态管理
        var goodsdetails = {
          id: this.id,
          count: this.shopcarnumber,
          price: this.spinfo.sell_price,
          switchs: true //选取状态
        };
        //调用mutations把商品加入购物车 （vuex状态管理）
        // 用法   this.$store.commit('方法名'，'按需传的参数')
        this.$store.commit("addtocar", goodsdetails);
        return (dodo = false);
      }
    },
    // 动画钩子函数：el,表示 要执行动画的那个DOM元素，是一个原生的js对象
    beforeEnter(el) {
      //berareEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置开始动画之前的样式
      el.style.transform = "translate(0,0)";
      el.style.opacity = 1;
    },
    enter(el, done) {
      // dodo = false;
      clearTimeout(time);
      // 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的样式，结束状态
      el.offsetWidth; //强制动画刷新
      // 动态计算小球位置
      // 1.自己的位置2.需要去的位置
      // getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
      // 1.语法：这个方法没有参数。
      // rectObject = object.getBoundingClientRect();
      // 2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
      // 　rectObject.top：元素上边到视窗上边的距离;
      // 　rectObject.right：元素右边到视窗左边的距离;
      // 　rectObject.bottom：元素下边到视窗上边的距离;
      // 　rectObject.left：元素左边到视窗左边的距离;
      let shopinfoball = this.$refs.ball.getBoundingClientRect();
      let shopcarball = document
        .getElementById("ball_car")
        .getBoundingClientRect();
      let x = shopcarball.left - shopinfoball.left;
      let y = shopcarball.top - shopinfoball.top;
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
      var time = setTimeout(() => {
        done(); //这里的done 其实就是afterEnter，官方文档说这个必须调用一下  （官方：不调用会同时过渡）
        dodo = true;
      }, 800);
    },
    afterEnter(el) {
      // 动画完成之后
      this.flag = !this.flag;
      // console.log(this.flag);
    },
    //购物车计数
    getshopcarnumber(num) {
      this.shopcarnumber = num;
      // console.log(this.shopcarnumber);
    }
  },
  components: {
    swiperlunbo,
    numbox
  }
};
</script>
<style scoped>
.mui-btn-block {
  padding: 8px 0px;
}
.xspic {
  color: red;
  font-size: 15px;
  font-weight: 500;
}
.shopinfo {
  background: #eeeeee;
  overflow: hidden;
}
.shopinfo .ball {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  position: absolute;
  z-index: 99;
  top: 370px;
  left: 140px;
}
</style>
 